<!DOCTYPE html>
<html>

<head>
	<title>视频录制</title>
	<meta charset="UTF-8" />
</head>

<body>
	<video class="video" width="600px" controls></video>
	<button class="record-btn">record</button>

	<script>
		let btn = document.querySelector(".record-btn")

		btn.addEventListener("click", async function () {
			let stream = await navigator.mediaDevices.getDisplayMedia({
				video: true
			})

			// 需要更好的浏览器支持
			const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9")
				? "video/webm; codecs=vp9"
				: "video/webm"
			let mediaRecorder = new MediaRecorder(stream, {
				mimeType: mime
			})

			let chunks = []
			mediaRecorder.addEventListener('dataavailable', function (e) {
				chunks.push(e.data)
			})

			mediaRecorder.addEventListener('stop', function () {
				let blob = new Blob(chunks, {
					type: chunks[0].type
				})
				let url = URL.createObjectURL(blob)

				let video = document.querySelector("video")
				video.src = url

				let a = document.createElement('a')
				a.href = url
				a.download = 'video.webm'
				a.click()
			})


			// 必须手动启动
			mediaRecorder.start()
		})

	</script>
</body>

</html>